<template>
  <div>
    <!-- Todo列表: 已完成的字体为绿色 -->
    <todo-list :todos="todos">
      <!-- 
        通过v-slot="xxx", 来接收子组件中slot标签的所有属性
        xxx的结构: {row: todo对象, $index: 下标}
       -->
      <template v-slot="scope">
        <span :style="{color: scope.row.completed?'green':'black'}">{{scope.row.title}}</span>
      </template>
    </todo-list>
    <hr>
    <!-- Todo列表: 带序号, 字体颜色蓝绿交替 -->
    <todo-list :todos="todos">
      <template v-slot="{row, $index}">
        <span :style="{color: $index%2===1?'green':'blue'}">{{row.title}}</span>
      </template>
    </todo-list>

    <hr>

    <slot-test title="abc">
      <!-- 默认插槽内容可以省略template -->
      <h3>默认插槽的内容2</h3>
      <!-- 
      <template v-slot:default>
      <template #default>
      <template>
        <h3>默认插槽的内容</h3>
      </template> -->

      <!-- 给具名指定内容, 不能省略template -->
      <!-- <template v-slot:content> -->
      <template #content>
        <h3>content插槽的内容222 </h3>
      </template>
    </slot-test>
    
  </div>
</template>

<script>
import SlotTest from './components/SlotTest.vue'
import TodoList from './components/TodoList.vue'
export default {
  name: 'App',
  components: {
    SlotTest,
    TodoList
  },

  data () {
    return {
      todos: [
        {id: 1, title: 'AAA', completed: false},
        {id: 2, title: 'BBB', completed: false},
        {id: 3, title: 'CCC', completed: true},
        {id: 4, title: 'DDD', completed: false},
      ]
    }
  }
}
</script>

<style scoped>

</style>
